<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:fn="http://java.sun.com/jsp/jstl/functions"
	xmlns:p="http://primefaces.org/ui" template="../templates/ui.xhtml">
	<ui:define name="content">
		<p:tabView orientation="left" id="tabview1">
			<p:tab title="Product Management">
				<h:outputLabel value="" />
				<p:tabView orientation="top" id="tabview2">
					<p:tab title="View Products">
						<h:form id="viewForm">
							<p:growl id="messages" showDetail="true" />
							<h:panelGrid>
								<p:dataTable
									value="#{productManagedBean.masterCatalogDataModel}" id="table"
									scrollable="true" scrollRows="15" scrollHeight="220"
									editable="true" var="product"
									selection="#{productManagedBean.selectedMasterCatalogDTO}"
									selectionMode="single">
									<f:facet name="header">
                    			    In-Cell Editing
                    			</f:facet>

									<p:ajax event="rowEdit" listener="#{productManagedBean.onEdit}"
										update=":tabview1:tabview2:viewForm:messages" />
									<p:ajax event="rowEditCancel"
										listener="#{productManagedBean.onCancel}"
										update=":tabview1:tabview2:viewForm:messages" />
									<p:ajax event="rowSelect"
										listener="#{productManagedBean.onSelect}"
										update=":tabview1:tabview2:viewForm:messages" />
									<p:column headerText="Id">
										<h:outputText value="#{product.itemId}" />
									</p:column>
									<p:column headerText="Name">
										<h:outputText value="#{product.itemName}" />
									</p:column>
									<p:column headerText="Brand">
										<h:outputText value="#{product.itemBrand}" />
									</p:column>
									<p:column headerText="Description">
										<h:outputText value=" #{product.itemDescription}" />
									</p:column>
									<p:column headerText="L1" filterBy="l1Name">
										<p:cellEditor>
											<f:facet name="output">
												<h:outputText value="#{product.l1Name}" />
											</f:facet>
											<f:facet name="input">
												<h:inputText value="#{product.l1Id}">
													<p:ajax event="change"
														listener="#{productManagedBean.l1Changed}" update="l2">
													</p:ajax>
													<f:param name="rowId" value="#{product.itemId}"></f:param>
												</h:inputText>
											</f:facet>
										</p:cellEditor>
									</p:column>
									<p:column headerText="L2" filterBy="l2Name">
										<p:cellEditor>
											<f:facet name="output">
												<h:outputText value="#{product.l2Name}" />
											</f:facet>
											<f:facet name="input">
												<h:inputText value="#{product.l2Id}" id="l2" />
											</f:facet>
										</p:cellEditor>
									</p:column>
									<p:column headerText="L3" filterBy="l3Name">
										<p:cellEditor>
											<f:facet name="output">
												<h:outputText value="#{product.l3Name}" />
											</f:facet>
											<f:facet name="input">
												<h:inputText value="#{product.l3Id}" />
											</f:facet>
										</p:cellEditor>
									</p:column>
									<p:column>
										<p:rowEditor />
									</p:column>

								</p:dataTable>
							</h:panelGrid>
							<p:spacer height="25px" />
							<div style="float: right;">
								<p:commandButton value="Add" action="#{productManagedBean.add}"
									update="viewForm" />
								<p:commandButton value="Edit"
									action="#{productManagedBean.edit}" update="viewForm" />
							</div>
							<p:fieldset legend="Add Product" id="addProduct"
								style="width:100%;padding:0px;"
								rendered="#{productManagedBean.addFlag or productManagedBean.editFlag}">
								<p:messages autoUpdate="true" />
								<h:panelGrid columns="2" style="width:100%;border:none;">
									<p:outputLabel value="Name :" />
									<p:inputText value="#{productManagedBean.name }"
										required="true" id="name" requiredMessage="Name is Required" />
									<p:outputLabel value="Brand :" />
									<p:inputText value="#{productManagedBean.brand }"
										required="true" id="brand" requiredMessage="Brand is Required" />
									<p:outputLabel value="Description :" />
									<p:inputText value="#{productManagedBean.description }"
										id="desc" />
									<p:outputLabel value="Level 1 :" />
									<h:selectOneMenu value="#{productManagedBean.l1Id}">
										<f:selectItem itemLabel="Select" itemValue="0" />
										<f:selectItems value="#{productManagedBean.l1List}" var="var"
											itemLabel="#{var.l1Name}" itemValue="#{var.l1Id}" />
										<p:ajax event="change"
											listener="#{productManagedBean.l1Selected}"
											update="id_l2 id_l3"></p:ajax>
									</h:selectOneMenu>
									<p:outputLabel value="Level 2 :" />
									<h:selectOneMenu value="#{productManagedBean.l2Id}" id="id_l2">
										<f:selectItem itemLabel="Select" itemValue="0" />
										<f:selectItems value="#{productManagedBean.l2List}" var="var"
											itemLabel="#{var.l2Name}" itemValue="#{var.l2Id}" />
										<p:ajax event="change"
											listener="#{productManagedBean.l2Selected}" update="id_l3"></p:ajax>
									</h:selectOneMenu>
									<p:outputLabel value="Level 3 :" />
									<h:selectOneMenu value="#{productManagedBean.l3Id}" id="id_l3">
										<f:selectItem itemLabel="Select" itemValue="0" />
										<f:selectItems value="#{productManagedBean.l3List}" var="var"
											itemLabel="#{var.l3Name}" itemValue="#{var.l3Id}" />
									</h:selectOneMenu>
									<p:spacer width="10" />
									<h:panelGrid columns="2" style="float:right;">
										<p:commandButton value="Save"
											action="#{productManagedBean.save}" update="viewForm" />
										<p:commandButton value="Cancel" immediate="true"
											action="#{productManagedBean.cancel}" update="viewForm" />
									</h:panelGrid>
								</h:panelGrid>
							</p:fieldset>
						</h:form>
					</p:tab>

				</p:tabView>
			</p:tab>
			<p:tab title="Item Management">
				<p:tabView orientation="top">
					<p:tab title="View Item">
						<h:form id="viewItem">
							<p:dataTable value="#{addProduct.itemsList}" var="item">
								<p:column>
									<f:facet name="header">
										<h:outputLabel value="Id" />
									</f:facet>
									<h:outputText value="#{item.childItemId}" />
								</p:column>
								<p:column>
									<f:facet name="header">
										<h:outputLabel value="Image" />
									</f:facet>
									<p:graphicImage value="#{item.childItemImagePath}" />
								</p:column>
								<p:column>
									<f:facet name="header">
										<h:outputLabel value="Size" />
									</f:facet>
									<h:outputText value="#{item.childItemSize}" />
								</p:column>
								<p:column>
									<f:facet name="header">
										<h:outputLabel value="Item Price" />
									</f:facet>
									<h:outputText value="#{item.childItemPrice}" />
								</p:column>
								<p:column>
									<f:facet name="header">
										<h:outputLabel value="SRP" />
									</f:facet>
									<h:outputText value="#{item.childItemSrp}" />
								</p:column>

								<p:column>
									<f:facet name="header">
										<h:outputLabel value="Qty" />
									</f:facet>
									<h:outputText value="#{item.itemQty}" />
								</p:column>
								<p:column>
									<f:facet name="header">
										<h:outputLabel value="Location" />
									</f:facet>
									<h:outputText value="#{item.itemLocation}" />
								</p:column>

							</p:dataTable>

						</h:form>
					</p:tab>
					<p:tab title="Add Item">
						<h:form id="addItemForm">
						<p:growl id="messages" showDetail="true" />
						<p:messages/>
							<h:panelGrid columns="2">
								<p:outputLabel value="Level 1 :" />
								<h:selectOneMenu value="#{addProduct.l1Id}">
									<f:selectItem itemLabel="Select" itemValue="0" />
									<f:selectItems value="#{addProduct.l1List}" var="var"
										itemLabel="#{var.l1Name}" itemValue="#{var.l1Id}" />
									<p:ajax event="change" listener="#{addProduct.l1Selected}"
										update="id_l2 id_l3 id_master"></p:ajax>
								</h:selectOneMenu>
								<p:outputLabel value="Level 2 :" />
								<h:selectOneMenu value="#{addProduct.l2Id}" id="id_l2">
									<f:selectItem itemLabel="Select" itemValue="0" />
									<f:selectItems value="#{addProduct.l2List}" var="var"
										itemLabel="#{var.l2Name}" itemValue="#{var.l2Id}" />
									<p:ajax event="change" listener="#{addProduct.l2Selected}"
										update="id_l3 id_master"></p:ajax>
								</h:selectOneMenu>
								<p:outputLabel value="Level 3 :" />
								<h:selectOneMenu value="#{addProduct.l3Id}" id="id_l3">
									<f:selectItem itemLabel="Select" itemValue="0" />
									<f:selectItems value="#{addProduct.l3List}" var="var"
										itemLabel="#{var.l3Name}" itemValue="#{var.l3Id}" />
									<p:ajax event="change" listener="#{addProduct.l3Selected}"
										update="id_master"></p:ajax>
								</h:selectOneMenu>


								<h:outputText value="Master table Id :" />
								<h:selectOneMenu value="#{addProduct.masterTableId }" required="true" requiredMessage="Master Table Id required"
									id="id_master">
									<f:selectItem itemLabel="Select" itemValue="#{null}" />
									<f:selectItems value="#{addProduct.filterdMasterlist}"
										var="master"
										itemLabel="#{master.itemBrand} - #{master.itemName}"
										itemValue="#{master.itemId}" />
								</h:selectOneMenu>
								<h:outputText value="Item Size :" />
								<h:inputText value="#{addProduct.itemSize }" required="true" requiredMessage="Item Size required"/>
								<h:outputText value="Price (MRP) :" />
								<h:inputText value="#{addProduct.itemPrice }" required="true" requiredMessage="Price (MRP) required"/>
								<h:outputText value="SRP :" />
								<h:inputText value="#{addProduct.itemSrp }" required="true" requiredMessage="SRP required"/>
							</h:panelGrid>
							<div style="height: 15px;" />
							<p:fileUpload fileUploadListener="#{addProduct.handleFileUpload}" 
								allowTypes="/(\.|\/)(gif|jpe?g|png)$/"
								description="Select Image" sizeLimit="20000" />
							<div style="height: 15px;" />
							<p:commandButton value="Add Product" update="addItemForm"
								oncomplete="if(#{!facesContext.validationFailed})
								popup.show();"
								action="#{addProduct.addProduct }" />
						</h:form>
						<p:dialog header="Message" widgetVar="popup" position="center">
							<h:outputLabel value="Product uploaded successfully" />
						</p:dialog>
					</p:tab>
					<p:tab title="Edit Item"></p:tab>
				</p:tabView>

			</p:tab>
			<p:tab title="View Orders">
				<ui:include src="/pages/merchant/orders.xhtml"></ui:include>
			</p:tab>
			<p:tab title="Offer Management">
				<ui:include src="/pages/merchant/offers.xhtml"></ui:include>
			</p:tab>
			<p:tab title="Menu Management">
				<ui:include src="/pages/merchant/organizeMenu.xhtml"></ui:include>
			</p:tab>
			<!--<p:tab title="Google Maps">
				<ui:include src="/pages/merchant/maps.xhtml"></ui:include>
			</p:tab>
			-->
			<p:tab title="Dashboard">
				<ui:include src="/pages/merchant/dashboard.xhtml"></ui:include>
			</p:tab>
			<p:tab title="Role Management">
				<ui:include src="/pages/merchant/roles.xhtml"></ui:include>
			</p:tab>
		</p:tabView>

	</ui:define>
</ui:composition>